<template>
  <page class="type">
    <van-nav-bar fixed title="分类" left-arrow @click-left="back()" />
    <van-tree-select @click-nav="ontype" v-model:main-active-index="state.activeIndex" :items="state.items">
      <template #content>
        <item  :list="state.indeslist"></item>
      </template>
    </van-tree-select>
  </page>
</template>
  


<script setup lang="ts">

import { onMounted, reactive } from "vue";
import { useRouterAction } from "@/utils/router";

import { list } from "@/serve/_";
const { back, push } = useRouterAction()

// import {  showToast } from 'vant';
import { ClassType } from "@/types/res/home";



//定义变量
interface StateItem {
  id:string;
  text:string
}

const state: {
  activeIndex: number,//搜索框的关键字
  items: StateItem[],
  indeslist: ClassType[],//接口请求到的字段
  typename:string
} = reactive({
  activeIndex: 0,
  items: [
    { id: '1', text: '小米' },
    { id: '2', text: '魅族' },
    { id: '3', text: '华为' },
    { id: '4', text: 'iphone' },
    { id: '5', text: '三星' },
    { id: '6', text: '锤子' },
    { id: '7', text: '诺基亚' },
  ],
  indeslist: [],
  typename:'小米'
})

onMounted(() => {
  getlist()

})

let getlist = async () => {
  state.indeslist = await list({
    typename: state.typename
  });
  console.log("dsadadsdasdsa", state.indeslist);

}

//点击调不同的值
let ontype = async (index:number) => {
  state.indeslist = await list({
    typename: state.items[index].text
  });
  console.log("点击",state.items[index].text);
  
  console.log("dsadadsdasdsa", state.indeslist);
}



</script>

  
<style lang="less" scoped>
@import "@page/type.less";
</style>
  